<template>
  <div class="main-app">
    <div class="box left">
      <dv-border-box-1 class="border-box left-class">
        <dv-capsule-chart
          :config="config7"
          class="charts"
          style="width: 80%; height: 300px"
        />
      </dv-border-box-1>
      <dv-border-box-8 class="border-box left-class">
        <dv-scroll-board
          :config="config2"
          class="charts"
          style="width: 90%; height: 290px; left: 0%; top: 2%"
        />
      </dv-border-box-8>
    </div>
    <div class="box center">
      <center>
        <dv-decoration-1 style="width: 200px; height: 50px" />
        <dv-decoration-11 style="width: 200px; height: 60px; color: green"
          >数据展示</dv-decoration-11
        >
        <dv-decoration-5 style="width: 300px; height: 40px" />
      </center>

      <dv-border-box-1 class="border-box dt">
        <dv-flyline-chart-enhanced
          :config="config5"
          :dev="true"
          class="charts dt"
          style="  border-radius:20px;border-red;top:2%;left:2%;margin:0%;width:96%;height:500px"
        />
      </dv-border-box-1>
    </div>
    <div class="box right">
      <dv-border-box-1 class="border-box">
        <dv-scroll-ranking-board
          :config="config3"
          class="charts"
          style="height: 300px; width: 80%; left: 10%"
        />
      </dv-border-box-1>
      <dv-border-box-8 :reverse="true" class="border-box">
        <dv-conical-column-chart
          :config="config6"
          class="charts"
          style="height: 300px"
        />
      </dv-border-box-8>
    </div>
  </div>
</template>
<script>
import {
  config1,
  config2,
  config3,
  config4,
  config5,
  config6,
  config7,
} from "./config.js";
export default {
  name: "test1",
  data: function () {
    return {
      config1,
      config2,
      config3,
      config4,
      config5,
      config6,
      config7,
    };
  },
};
</script>
<style scoped>
.left-class {
  position: relative;
  height: 50%;
}
.box {
  position: relative;
  float: left;
  height: 660px;
  background-color: #01132c;
}
.dt {
  position: relative;
  height: 60%;
}
.main-app {
  position: relative;
}
.container {
  display: flex;
  background-color: #01132c;
}
.left,
.right {
  width: 25%;
}
.center {
  width: 50%;
}
.box {
  display: flex;
  flex-direction: column;
}
.charts {
  width: 80%;
  left: 10%;
  margin: 5%;
}
</style>
